<template>
    <el-dialog v-model="showDialog" :title="props.dicItem.type=='add'?'添加字典项':'修改字典项'" @close="close" style="width: 30%">
        <el-form ref="dataForm" :model="form" label-width="100px" align="center" :rules="rules">
            <el-form-item label="字典编码" prop="code">
                <el-input v-model="form.code" />
            </el-form-item>
            <el-form-item label="字典值" prop="value">
                <el-input v-model="form.value" />
            </el-form-item>
            <el-form-item label="序号" prop="orderId">
                <el-input v-model="form.orderId" />
            </el-form-item>
            <el-form-item label="备注"  prop="remark">
                <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button v-show='props.dicItem.type=="add"' type="primary" plain  @click="addDicItem">添加</el-button>
                <el-button v-show='props.dicItem.type=="edit"' type="primary" plain  @click="updateDicItem">更新</el-button>
                <el-button @click="close" type="primary" plain >取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'

    const emits = defineEmits(['close','reload'])
    let props = defineProps(['dicItem'])
    let showDialog = ref(false)
    let form = reactive({})
    let dataForm = ref()
    const rules = reactive({
        code: [
            {required: true, message: '请输入字典编码', trigger: 'blur' },
        ],
        value: [
            {required: true,message: '请输入字典值', trigger: 'blur'},
        ],
        orderId: [
            {required: true,message: '请输入序号', trigger: 'blur'},
        ],
        remark: [
            {required: true,message: '请输入备注', trigger: 'blur'},
        ],
    })
    onBeforeUpdate(function () {
        if(showDialog.value == true){
            if(props.dicItem.type == 'edit'){
                request.get(`/api/dictionary/getDictionary/${props.dicItem.id}`).then(resp => {
                    for(let key in resp){
                         form[key] = resp[key]
                    }
                })
            }else if(props.dicItem.type == "add"){
                for(let key in form){
                    delete form[key]
                }
             }
          }
    })

    function close(){
        showDialog.value = false
        dataForm.value.resetFields()//重置表单校验
    }

    function addDicItem(){
        dataForm.value.validate((valid, fields)=>{
            if(valid){
                let dic = props.dicItem.dic
                form.typeId = dic.id
                form.typeCode = dic.code
                form.typeName = dic.name
                request.post("/api/dictionary/addItem", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })
            }
        })
    }

    function updateDicItem(){
        dataForm.value.validate((valid, fields)=>{
            if(valid){
                let dic = props.dicItem.dic
                // form.typeId = dic.id
                // form.typeCode = dic.code
                // form.typeName = dic.name
                form.id = props.dicItem.id
                request.post("/api/dictionary/updateItem", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }
        })
    }

    defineExpose({showDialog})
</script>

<style scoped>

</style>